<template>
  <a class="good_box brick-item"
    @click="goToActive(Item)">
    <!-- <span class="discount-card" v-if="child.activity">参与活动</span> -->
    <div class="preview_box">
      <img class="previewImg" :src="prefixImg + Item.image " :alt="Item.name" :title="Item.name" @error="catchErrorImage($event)"/>
    </div>
    <h3 class="title"><span v-html="Item.name"></span><template v-if="Item.other"> - <span v-html="Item.other"></span></template></h3>
    <span class="format" v-html="Item.brandName"></span>
    <h4 class="price">
      <template v-if="isExamComputed === 1">
        <span class="vert-mid" v-if="Item.priceLowerLimit === Item.priceUpperLimit">￥{{Item.priceLowerLimit  | floatPrices}}</span>
        <span class="vert-mid" v-else>￥{{Item.priceLowerLimit  | floatPrices}} - {{Item.priceUpperLimit  | floatPrices}}</span>  
      </template>
      <span class="color-yellow" v-else-if="isExamComputed === 4"> 登录后查看价格</span>
      <span class="color-yellow" v-else> 审核通过可查看</span>
    </h4>
  </a>
</template>

<script>
  import {Row, Button} from 'element-ui'
  import {labels, prefixImg} from '@/tool/index'
  // import {getCookie} from '@/config/mUntils'
  import {mapState} from 'vuex'
  export default{
    name: 'GoodProduct',
    components: {
      elRow: Row,
      elButton: Button
    },
    props: {
      Item: {
        type: Object
      }
    },
    data () {
      return {
        activetab: -1
      }
    },
    methods: {
      labels (newVal) {
        let _labelarr = []
        if (newVal === null) return false
        let _arr = newVal.split(',')
        _arr.map((item, index) => {
          _labelarr.push({text: labels[item - 1], xh: item})
        })
        return _labelarr
      },
      goToActive (item) {
        console.log(item.activity)
        this.$router.push({name: 'productDetail', params: {commodityID: item.id}, query: {keyword: this.$route.query.keyword}})
      },
      catchErrorImage (e) {
        e.target.src = require('img/newload.png')
      }
    },
    computed: {
      prefixImg () {
        return prefixImg
      },
      isExamComputed () {
        return this.$store.getters.loginStatus
      },
      ...mapState({
        nowDiscount: state => state.user.discount
      })
    }
  }
</script>
<style lang="scss">
    .button_style{width:74%;}

    .yellow_shopcart{
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      border-radius: 50%;
      font-size: 10px;
      line-height: 22px;
      width: 20px;
      height: 20px;
      background-image: linear-gradient(18deg, #F5A310 0%, #FFCD08 100%);
    }
.good_box{
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 230px;
  height: 300px;
  background: #FFFFFF;
  text-align: center;
  margin-bottom: 10px;
  transition: all 0.2s linear;
  overflow: hidden;
  .preview_box{ 
    width: 195px;
    height: 195px;
    margin: 0 auto 1px;
    .previewImg{
      width: 100%;
      height:100%;
      vertical-align: middle;
    }
  }
  .toptag{
    position: absolute;
    top: 0px;
    left: 50%;
    width: 46px;
    margin-left: -23px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    background: #ff5928;
    font-size: 12px;
  }
  .format{
    font-size: 12px;
    color: #B0B0B0;
    line-height: 17px;
  }
  .title{
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    margin-bottom: 5px;
  }
  .price{
    font-size: 14px;
    color: #FF0100;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
  }
}
</style>


